<%@ page language="java" import="com.siysoft.tc.base.bean.to.User" pageEncoding="UTF-8"%>
<!----上传头像----->
<script src="<%=request.getContextPath()%>/common/js/imagecropper.js"></script>
  <div id="head_container">
    <div class="head_wrap">
    	<div class="header_btn">
        <a id="selectBtn" href="javascript:void(0);" onclick="document.getElementById('input').click();">选择</a>
        <a id="saveBtn" href="javascript:void(0);" onclick="saveImage();">保存</a>
        </div>
        <input type="file" id="input" size="10" style="visibility:hidden;" onchange="selectImage(this.files)" />
        <!-- 头像 -->
		<form id="headerForm" method="post" enctype="multipart/form-data" action="">
			<input type="hidden" name="user_avatar_data" id="user_avatar_data">
		</form>
        <div id="wrapper">
            <canvas id="cropper"></canvas>
            

            <span id="status" style="position:absolute;left:350px;top:10px;width:100px;"></span>
            <div id="previewContainer" style=" display:none">
                <canvas id="preview180" width="180" height="180" class="preview"></canvas>
                <span style="display:block;width:100%;padding-top:5px;text-align:center;">大尺寸图片，180x180像素</span>

                <canvas id="preview100" width="100" height="100" style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
                <span style="position:absolute;left:230px;top:110px;width:100px;text-align:center;">中尺寸图片 100x100像素</span>

                <canvas id="preview50" width="50" height="50" style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
                <span style="position:absolute;left:245px;top:210px;width:70px;text-align:center;">小尺寸图片 50x50像素</span>
            </div>
        </div>
        
        </div>
            <div class="footer_btn">
            <a id="rotateLeftBtn" href="javascript:void(0);" onclick="rotateImage(event);">向左旋转</a>
            <a id="rotateRightBtn" href="javascript:void(0);" onclick="rotateImage(event);">向右旋转</a>
            </div>
    </div> 
     
 <!-- 上传图片start -->
		<div id="container" style="display: none">
			<div class="onBtn">
				<a id="selectBtn" href="javascript:void(0);"
					onclick="document.getElementById('input').click();">选择</a> <a
					id="saveBtn" href="javascript:void(0);" onclick="saveImage();">保存</a>
			</div>
			<input type="file" id="input" size="10" style="visibility: hidden;"
				onchange="selectImage(this.files)" />

			<div id="wrapper">
				<canvas id="cropper"></canvas>
				<!-- <a id="rotateLeftBtn" href="javascript:void(0);" onclick="rotateImage(event);">向左旋转</a>
            <a id="rotateRightBtn" href="javascript:void(0);" onclick="rotateImage(event);">向右旋转</a> -->

				<span id="status"
					style="position: absolute; left: 350px; top: 10px; width: 100px;"></span>
				<div id="previewContainer" style="display: none">
					<canvas id="preview180" width="180" height="180" class="preview"></canvas>
					<span
						style="display: block; width: 100%; padding-top: 5px; text-align: center;">大尺寸图片，180x180像素</span>

					<canvas id="preview100" width="100" height="100"
						style="position:absolute;left:230px;top:0px;" class="preview"></canvas>
					<span
						style="position: absolute; left: 230px; top: 110px; width: 100px; text-align: center;">中尺寸图片
						100x100像素</span>

					<canvas id="preview50" width="50" height="50"
						style="position:absolute;left:255px;top:150px;" class="preview"></canvas>
					<span
						style="position: absolute; left: 245px; top: 210px; width: 70px; text-align: center;">小尺寸图片
						50x50像素</span>
				</div>
			</div>

		</div>
  <script>   
    
var cropper;

function init()
{   
    //绑定
    cropper = new ImageCropper(300, 300, 180, 180);
    cropper.setCanvas("cropper");
    cropper.addPreview("preview180");
    cropper.addPreview("preview100");
    cropper.addPreview("preview50");
    //检测用户浏览器是否支持imagecropper插件
    if(!cropper.isAvaiable())
    {
        alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
    }
}

//打开本地图片
function selectImage(fileList)
{
    cropper.loadImage(fileList[0]);
}

//旋转图片
function rotateImage(e)
{
    switch(e.target.id)
    {
        case "rotateLeftBtn":
            cropper.rotate(-90);
            break;
        case "rotateRightBtn":
            cropper.rotate(90);
            break;
    }
}

//上传图片
function saveImage()
{
    //选个你需要的大小
    var imgData = cropper.getCroppedImageData(180, 180);
    console.log("上传了："+imgData);
	
	$(".filterBg").css({"z-index" : "50"});
	imgData = imgData.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
	$("#user_avatar_data").val(imgData);
    //http://123.57.164.31:8080/tc_platform/app/uploadavatar.htm?user_id=2277&user_avatar=asfdh21y78h12kjasnfkasdf
    $("#headerForm").ajaxSubmit({
	   type: 'post',  
       url: "<%=request.getContextPath()%>/app/uploadavatar.htm?user_id=11", 
       crossDomain: true,
       dataType: 'json',
       data:'',
       beforeSend:function(){
    	 //这里是开始执行方法，显示效果，效果自己写
			
    	 },
    	 complete:function(){
    	 //方法执行完毕，效果自己可以关闭，或者隐藏效果
    			
    	 },
       success: function(data){
    	   console.log(data);
    	   var headSrc=data.data.avatar_url;
    	   $("#userHead").attr("src",headSrc);
   		   alert("上传成功");
   		   $("#head_container").hide();
    	     //window.setTimeout(function(){
		    	//window.location.href="/app/activity_my_create.jsp";
		     //},1000)
       },
       error: function() { alert('上传失败'); }
       //beforeSend: setHeader
	})
}
	/**
		  * 时间对象的格式化
		  */
		function jsonDateFormat(jsonDate) {//json日期格式转换为正常格式
		     try {
		    	 if(jsonDate==0){
		    		 return "未完成";
		    	 }
		         var date = new Date(parseInt(jsonDate.replace("/Date(", "").replace(")/", ""), 10));
		         var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
		         var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
		         var hours = date.getHours();
		         if(hours<10){
		        	 hours='0' + hours;
		         }
		         var minutes = date.getMinutes();
		         if(minutes<10){
		        	 minutes="0" + minutes;
		         }
		         var seconds = date.getSeconds();
		         var milliseconds = date.getMilliseconds();
		         return date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes;//+ ":" + seconds + '0' + ":" + milliseconds + '0'
		     } catch (ex) {
		         return "";
		     }
		 }	
		 </script>